<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>为相册增加相片</title>

    <link rel="stylesheet" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.css}">
    <script type="text/javascript" th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>
    <script type="text/javascript" th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.js}"></script>
<body>
        <!-- 上传相片 需要经过审核才能发布-->
        <!--<form method="post" action="/uploadPhotoFile" enctype="multipart/form-data">
            <input type="hidden" th:value="${jsonResult.result.id}" name="albumId" id="albumId" /><br/>
            选择相片:<input type="file" name="uploadFile" /><br/>
            <input type="submit" value="上传"  />
        </form>-->


            <input type="hidden" th:value="${jsonResult.result.id}" name="albumId" id="albumId"  /><br/>
            选择相片:<input type="file" name="uploadFile" id="photofile" multiple /><br/>
            <input type="button" value="上传" id="submitFile" />





   <p>在controller中已经查询出了该相册的相片（可能有可能没有）</p>
    <div th:if="${not #lists.isEmpty(jsonResult.result.photoLibraries)}" th:each="photoLibrarie : ${jsonResult.result.photoLibraries}" style="background-color: aqua">
        <p>相片所属用户：<span th:text="${photoLibrarie.userId}"></span></p>
        <p> 相片路径: <span th:text="${photoLibrarie.photoUrl}"></span> </p>
        <p> 创建时间: <span th:text="${photoLibrarie.createTime}"></span> </p>
        <input class="photoUuid" type="checkbox" th:value="${photoLibrarie.id}" /> 相册编号
    </div>

    <!-- 在这里可以对相片进行一些操作 -->
    <div>
        <h2>相册编号：<span th:text="${jsonResult.result.id}"></span></h2>
        <input type="text" th:value="${jsonResult.result.id}" id="editAlbumId" />
        <h3>
            批量删除，之前判断是否有相片，只能在有相片的前提下才有批量删除
            <a></a>
        </h3>
        <h3>
            功能二： 移动相片至别的相册
            <button id="movePhotoforAlbum">移动相片至别的相册</button>
            <button id="cancelMovePhotoforAlbum">取消</button>
            <button id="moveToAlbum">移动至(哪个相册)</button>
        </h3>
        <h3>
           功能三： 编辑相册名称（弹出模态框）
            <button id="editAlbumName" data-toggle="modal" data-target="#myModal"> 编辑相册名称</button>
        </h3>
    </div>


        表格：
        <!--功能二： 移动相片至别的相册-->
        <table id="albumTbale">
            <tr>
                <td>相册名称</td>
            </tr>
        </table>


        <!--编辑相册名称 模态框（Modal） -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            编辑相册名称
                        </h4>
                    </div>
                    <div class="modal-body">

                        <input type="text" name="aName" id="albumName"/>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                        <button type="button" class="btn btn-primary" id="saveEditAlbumName">
                            确定
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>

</body>
   <!-- 上传图片-->
    <script type="text/javascript">
        $(function(){
            $("#submitFile").click(function(){
                var  albumId = $("#albumId").val();
                var formData = new FormData();
                for(var i=0;i<$("#photofile")[0].files.length;i++){
                    formData.append("uploadFile", $("#photofile")[0].files[i]);    //生成一对表单属性
                }
                $.ajax({
                    url:"/uploadPhotoFile?albumId="+albumId,
                    type : 'POST',
                    data : formData,
                    processData: false,
                    contentType: false,
                    cache: false,
                    timeout: 600000,
                    success:function(dt){
                        console.log(dt);
                    }
                }) ;
            });
        });
    </script>


    <!--编辑相册名称-->
    <script type="text/javascript">
        $(function(){
            var  editAlbumId =  $("#editAlbumId").val();       //要修改的相册编号
            console.log("要修改的相册编号"+editAlbumId);
            $("#editAlbumName").click(function(){            //点击修改相册名称，发送ajax回显出该相册的名称
                $.ajax({
                   url:"/queryEditAlbumNameByAlbumId/"+editAlbumId,
                   method:"POST",
                   dataType:"json",
                   success:function(dt){
                        console.log(dt);
                        if(dt.errorCode==200){
                            var oldName = dt.result.albumName;
                            //回显相册名称
                            $("#albumName").val(oldName);
                        }
                   }
                });
            });

            //保存修改的相册名称
            $("#saveEditAlbumName").click(function(){
                //获取新的相册名称
               var newAlbumName = $("#albumName").val();
               $.ajax({
                  url:"/saveEditAlbumName/"+editAlbumId+"/"+newAlbumName,
                  method:"POST",
                  dataType:"json",
                  success:function(dt){
                        console.log(dt);
                  }
               });
            });
        });
    </script>


    <!--移动相片至别的相册-->
    <script type="text/javascript">
        $(function(){
           //将复选框隐藏
          var phtotId =  $(".photoUuid");
          $.each(phtotId,function(i,obj){
              $(obj).hide();
          });

          //当点击移动至别的相册时，显示所有的复选框
          $("#movePhotoforAlbum").click(function(){
              $.each(phtotId,function(i,obj){
                  $(obj).show();
              });
              $("#moveToAlbum").show();
          });

          //点击取消时，隐藏所有的复选款
          $("#cancelMovePhotoforAlbum").click(function(){
              $.each(phtotId,function(i,obj){
                  $(obj).hide();
              });
              //并且要将 移动至 按钮隐藏
              $("#moveToAlbum").hide();
          });

            //当我点击 移动至 时 ，弹出该用户拥有的相册信息
            $("#moveToAlbum").click(function(){

                //发送ajax,查询该用户拥有的相册信息
                $.ajax({
                    url:"/queryUserAlbumMsg",
                    method:"POST",
                    dataType:"json",
                    success:function(dt){
                        console.log(dt);
                        if(dt.errorCode==200){         //已查询出相册信息
                            //
                            var photoTable = $("#albumTbale");
                          for(var i=0;i<dt.result.photoAlbums.length;i++){
                              photoTable.append("<tr><td onclick='javascript:moveNewAlbum("+dt.result.photoAlbums[i].id+")'>"+dt.result.photoAlbums[i].albumName+"</td></tr>");
                          }
                        }
                    }
                });

            });

        });


        //当点击移动至哪个相册时
        function moveNewAlbum(obj){
            var ptId =  $(".photoUuid");
            //要判断至少有一个复选款被勾选
            var sPhotoIds = "";
            $.each(ptId,function(i,obj){
                if($(obj).prop("checked")){          //被勾选
                    //获取到复选框的值
                    sPhotoIds = sPhotoIds+ $(obj).val();
                }
            });
            console.log(sPhotoIds);
        }

    </script>
</html>